<template>
  <h1>个人中心页</h1>
    <div v-for="(weibo,i) in arr" style="width: 500px;height:40px;margin: 0 auto;">
        <h3 style="float: left;margin: 0;line-height: 32px;">{{weibo.content}}</h3>
        <el-button type="danger" style="float: right" @click="del(weibo.id,i)">删除</el-button>
    </div>
</template>

<script setup>

import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";
//准备数组存放请求回来的微博列表数据
const arr = ref([]);
//页面加载完毕立即执行
onMounted(()=>{
  //先获取当前登录的用户id
  let user =localStorage.user?JSON.parse(localStorage.user):null;
  axios.get('http://localhost:8080/v1/weibos?userId='+user.id)
      .then((res)=>{
        // console.log(res);
          if(res.data.code==2002){
              arr.value = res.data.data;
              // console.log(arr.value);
              //如果数组的长度为0(成功请求但用户自己的微博数为0)
              if (arr.value.length==0){
                ElMessage.warning('快来发布你的第一条内容吧!');
                router.push('/post');
              }
          }
      });
});
//添加删除微博的方法
const del =(id,i)=>{
  if(confirm('您是否要删除此条微博?')){
    axios.post('http://localhost:8080/v1/weibos/'+id+'/delete')//restful风格
        .then((response)=>{
          if(response.data.code==2002){
            ElMessage.success('删除成功!');
            arr.value.splice(i,1);
            //如果没有微博了
            if(arr.value.length==0){
              ElMessage.warning('快来发布微博吧!');
              //跳转至发布页
              router.push('/post');
            }
          }
        })
  }
}
</script>


<style scoped>

</style>